<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 设置容器为网格布局 */
			.container {
			  display: grid;
			  /* 定义两行，每行高度为100像素 */
			  grid-template-rows: 100px 100px;
			  /* 定义两列，每列宽度为200像素 */
			  grid-template-columns: 200px 200px;
			  /* 设置行列间距为10像素 */
			  grid-gap: 10px;
			}
			
			/* 子元素定位 */
			.item1 {
			  grid-row: 1 / 2; /* item1 跨第1行至第2行 */
			  grid-column: 1 / 2; /* item1 跨第1列至第2列 */
			}
			
			.item2 {
			  grid-row: 1 / 2; /* item2 跨第1行至第2行 */
			  grid-column: 2 / 3; /* item2 跨第2列至第3列 */
			}
			
			.item3 {
			  grid-row: 2 / 3; /* item3 跨第2行至第3行 */
			  grid-column: 1 / 3; /* item3 跨第1列至第3列 */
			}
			
			.container_2 {
			  display: grid;
			  grid-template-columns: 1fr 1fr 1fr 1fr;
			  grid-template-rows: 100vh; /* 设置容器的高度为视窗的高度，以填充整个屏幕 */
			}
			
			.container_2 .item {
			  padding: 20px; /* 添加一些内边距来美化布局 */
			  border: 1px solid #ccc; /* 添加边框以便区分不同的内容 */
			}
		</style>
	</head>
	<body>
		  <div class="container">
		    <div class="item item1">1</div>
		    <div class="item item2">2</div>
		    <div class="item item3">3</div>
		  </div>
		  
		  <br>
		  
		  
		  <div class="container_2">
		    <div class="item">内容1</div>
		    <div class="item">内容2</div>
		    <div class="item">内容3</div>
		    <div class="item">内容4</div>
		  </div>
	</body>
</html>